import { Button, Card, Form, Input, message, Popconfirm } from 'antd'
import React, { use } from 'react'
import { deleteBook, listBook } from '~/api/book'
import CreateBookModal from './CreateBookModal'
import UpdateBookModal from './UpdateBookModal'
import DetailBookModal from './DetailBookModal'

interface Book {
    id: number
    name: string
    author: string
    desciption: string
    cover: string
}
export default function BookManage() {
    const [bookList, setBookList] = React.useState<Book[]>([])
    const [name, setName] = React.useState<string>('')
    const [num, setNum] = useState(0)

    async function getBookList() {
        try {
            const res = await listBook(name)
            console.log('res ===>', res)
            setBookList(res || [])
        } catch (error) {
            console.log('error ===>', error)
        }
    }

    function searchBooks(values: { name: string }) {
        setName(values.name)
    }

    useEffect(() => {
        getBookList()
    }, [name, num])

    const [isCreateBookModalOpen, setIsCreateBookModalOpen] = React.useState(false)
    const [isUpdateBookModalOpen, setUpdateBookModalOpen] = useState(false)
    const [isDetailBookModalOpen, setDetailBookModalOpen] = useState(false)
    const [updateId, setUpdateId] = useState(0)

    async function handleDelete(id: number) {
        try {
            await deleteBook(id)
            message.success('删除成功')
            setNum(Math.random())
        } catch (error) {
            console.log('error ===>', error)
        }
    }

    return (
        <div className="text-16px">
            <CreateBookModal
                isOpen={isCreateBookModalOpen}
                handleClose={() => {
                    setIsCreateBookModalOpen(false)
                    setNum(Math.random())
                }}
            />
            <UpdateBookModal
                id={updateId}
                isOpen={isUpdateBookModalOpen}
                handleClose={() => {
                    setUpdateBookModalOpen(false)
                    setNum(Math.random())
                }}
            />
            <DetailBookModal
                id={updateId}
                isOpen={isDetailBookModalOpen}
                handleClose={() => {
                    setDetailBookModalOpen(false)
                }}
            ></DetailBookModal>
            <div className="lh-80px text-center text-32px">图书管理系统</div>
            <div className="p-20px  m-auto">
                <div>
                    <Form name="search" layout="inline" colon={false} onFinish={searchBooks}>
                        <Form.Item label="图书名称" name="name">
                            <Input />
                        </Form.Item>
                        <Form.Item label=" ">
                            <Button type="primary" htmlType="submit">
                                搜索图书
                            </Button>
                            <Button type="primary" htmlType="submit" className="ml-20px bg-green-500!" onClick={() => setIsCreateBookModalOpen(true)}>
                                添加图书
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="mt-20px grid lg:grid-cols-6 md:grid-cols-5 sm:grid-cols-4 grid-cols-2 gap-20px">
                    {bookList.map((book) => {
                        return (
                            <Card
                                key={book.id}
                                className="flex flex-col justify-end"
                                hoverable
                                cover={<img alt="example" className="flex-1" src={`http://localhost:3000/${book.cover}`} />}
                            >
                                <h2 className="font-700">{book.name}</h2>
                                <div>作者：{book.author}</div>
                                <div>{book.desciption}</div>
                                <div className="flex justify-around  mt-20px">
                                    <a
                                        href="#"
                                        onClick={() => {
                                            setUpdateId(book.id)
                                            setDetailBookModalOpen(true)
                                        }}
                                    >
                                        详情
                                    </a>
                                    <a
                                        href="#"
                                        onClick={() => {
                                            setUpdateId(book.id)
                                            setUpdateBookModalOpen(true)
                                        }}
                                    >
                                        编辑
                                    </a>
                                    <Popconfirm
                                        title="图书删除"
                                        description="确认删除吗？"
                                        onConfirm={() => handleDelete(book.id)}
                                        okText="是"
                                        cancelText="否"
                                    >
                                        <a href="#">删除</a>
                                    </Popconfirm>
                                </div>
                            </Card>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}
